<template>
    <el-drawer v-model="show" title="预付款退款信息" size="40%" direction="rtl" :before-close="handleClose">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="所属公司：">
                    {{ props.initList.companyName }}
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="客户名称：">
                    {{ props.initList.customerName }}
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="预付款总额：">
                    ￥{{ props.initList.advanceAmount }}
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="已退款总额：">
                    ￥{{ refundAmount }}
                </el-form-item>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column prop="createTime" label="申请日期" />
            <el-table-column prop="createByName" label="申请人" />
            <el-table-column prop="applyRefundAmount" label="需退款金额" />
            <el-table-column prop="applyReason" label="退款原因" />
            <el-table-column prop="refundStatus" label="状态">
                <template #default="scope">
                    <span v-if="scope.row.refundStatus === '0'" style="color: #F76355;">未退款</span>
                    <span v-if="scope.row.refundStatus === '1'" style="color: #69AFF0;">已退款</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="120px">
                <template #default="scope">
                    <el-tooltip content="付款">
                        <el-button @click="handlePayment(scope.row)" link type="danger">
                            <i style="font-size: 18px;" class="iconfont icon-chehui-1"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                        <el-button @click="handleDelete(scope.row)" :style="{ fontSize: '18px' }" link type="danger"
                            icon="CircleClose"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </el-drawer>

    <Payment :visible="paymentVisible" :initList="props.initList" :paymentObj="paymentObj"
        @submit="getList(props.initList.id), handleSubmit" @close="paymentVisible = false" />
</template>

<script setup lang="ts">
import Payment from './payment.vue'
import { getAdvanceChargeRefundApplyListApi, deleteAdvanceChargeRefundApplyApi } from '@/api/sj/financialManagement/advancePaymentManagement'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);
const paymentVisible = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
        getList(props.initList.id)
    }
}, { deep: true });

const tableData = ref([]);
const refundAmount = ref(0);
const loading = ref(false);
const paymentObj = ref({});

/** 列表删除 */
const handleDelete = (row: any) => {

    if (row.refundStatus === '1') return proxy?.$modal.msgError('已退款订单不能删除');

    ElMessageBox.confirm('此订单删除，您确定要这么做么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            try {
                const { code } = await deleteAdvanceChargeRefundApplyApi(row.id);

                if (code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功!'
                    });
                    getList(props.initList.id)
                }
            } catch (error) {

            }

        })
        .catch(() => { });
};

const handlePayment = (row: any) => {
    paymentObj.value = row;
    paymentVisible.value = true;
};

const handleSubmit = async () => {
    console.log('我是第一层哈哈哈')
    emits('submit', true);
};

const getList = async (id: any) => {
    loading.value = true;
    try {
        const res = await getAdvanceChargeRefundApplyListApi(id);
        tableData.value = res.data.refundApplies;
        refundAmount.value = res.data.refundAmount;
        loading.value = false;
    } catch (error) {
        loading.value = false;
    }
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>